<template>
    <div>
        <el-dialog v-model="props.isShow" :title="props.isAdd ? '添加商品规格' : '编辑商品规格'" center @open="open(formRef)"
            :before-close="close">
            <el-form :model="form" label-width="80px" :rules="rules" ref="formRef">
                <el-form-item label="规格名称" prop='specsname'>
                    <el-input v-model="form.specsname" />
                </el-form-item>

                <el-form-item label="规格属性" v-for="(item, index) in specsArr" :key="item.value">
                    <el-input v-model="item.value" class="inp1"></el-input>
                    <el-button type="primary" @click="addgui" v-if="index == 0">新增规格属性</el-button>
                    <el-button v-else @click="delgui(index)" class="del">删除</el-button>
                </el-form-item>

            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="close">取消</el-button>
                    <el-button type="primary" @click="submit(formRef)">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'
import { defineProps, defineEmits, defineExpose, ref, reactive } from 'vue';
import { ElMessage } from 'element-plus'
import { specsadd, specsedit, specsinfo } from '@/request/api';
import store from '@/store';
let emit = defineEmits(['close'])
let formRef = ref<FormInstance>()
let props = defineProps({
    isAdd: Boolean,
    isShow: Boolean
})
let form = ref({
    specsname: '',//商品规格名称
    attrs: [{}],//’颜色‘attrs商品规格属性值string"白色,红色，黄色"
    status: 1,//状态1正常2禁用number1
    id: 0
})
let specsArr = ref([{ value: '' }])

let submit = async (formEl: FormInstance | undefined) => {
    console.log(specsArr);
    form.value.attrs = specsArr.value.map(item => item.value)
    form.value.attrs = form.value.attrs.join(",")
    if (!formEl) return
    await formEl.validate((val) => {
        if (val) {
            if (props.isAdd) {
                specsadd(form.value).then(res => {
                    // console.log(res);
                    if (res.code == 200) {
                        get()
                        close()
                        ElMessage({
                            message: res.msg,
                            type: 'success',
                        })
                    } else {
                        ElMessage({
                            message: res.msg,
                            type: 'warning',
                        })
                    }
                })
            } else {
                specsedit(form.value).then(res => {
                    // console.log(res);
                    if (res.code == 200) {
                        get()
                        close()
                        ElMessage({
                            message: res.msg,
                            type: 'success',
                        })
                    } else {
                        ElMessage({
                            message: res.msg,
                            type: 'warning',
                        })
                    }
                })
            }
        }
    })

}


//添加规格
let addgui = () => {
    specsArr.value.push({ value: "" })

}
let delgui = (index: any) => {
    specsArr.value.splice(index, 1)
}
//处理点击空白处的bug
let open = (formEl?: FormInstance | undefined) => {
    if (!formEl) return
    form.value = {
        specsname: '',//商品规格名称
        attrs: [{}],//’颜色‘attrs商品规格属性值string"白色,红色，黄色"
        status: 1,//状态1正常2禁用number1
        id: 0
    }
    formEl.resetFields();
}
// 关闭清空
let close = () => {
    emit("close", false)
    specsArr.value = [{ value: "" }]
}
let lookup = (id: number) => {
    specsinfo({ id }).then((res: any) => {
        console.log(res);
        form.value = res.list[0]
        form.value.attrs.map((item: any, index: number) => {
            console.log(item, index);
            if (index == 0) {
                specsArr.value[0].value = item
            } else {
                specsArr.value.push({ value: item })
            }
        })
        form.value.id = id

    })

}

//定义 rules规则
let rules = reactive<FormRules>({
    specsname: [
        { required: true, message: "请输入规格名称", trigger: "blur" },
        { min: 2, max: 6, message: "长度最小为2，最大为6", trigger: "blur" },
    ]
});
let get = () => {
    store.dispatch("specs/getSpecsListAction")
    store.dispatch("specs/getCountAction")
}

defineExpose({
    lookup
})



</script>
<style lang="less" scoped>
.inp1 {
    width: 410px;
    margin-right: 20px;
}
</style>